<template>
	<view class="tmp-box">
		<view class='filterBox'>
			<view class='filter-input'>
				<text style="color: #b8b8b8;" class="iconfont icon-sousuo filterImg" />
				<input class="text" type='text' v-model="inputVal" confirm-type="搜索" @confirm='handleFllter'
					placeholder='搜索' />
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	// 声明事件（可选，用于类型提示）
	const emit = defineEmits<{
		(e : 'confirm', data : string) : void
	}>()
	const inputVal = ref('')
	const handleFllter = (e) => {
		console.log(e.detail.value)
		emit("confirm", e.detail.value)
	}
	const clears = () => {
		console.log(inputVal.value)
		inputVal.value = ""
	}
</script>

<style lang="scss" scoped>
	.filterBox {
		padding: 0rpx 25rpx;
		background-color: #fff;
		margin-bottom: 15rpx;

		.filter-input {
			height: 80rpx;
			background-color: #eeeff0;
			border-radius: 20rpx;
			display: flex;
			align-items: center;

			padding-left: 40rpx;

			.filterImg {
				width: 36rpx;
				height: 36rpx;
				margin-right: 20rpx;
				margin-bottom: 5rpx;
			}

			.filterImgs {
				width: 36rpx;
				height: 36rpx;

			}

			.text {
				width: 84%;
				background-color: #eeeff0;
				font-size: 32rpx;
				color: #000;
			}
		}
	}

	@import url("../css/icon.css");
</style>